// 引入路由对象
import {
  createRouter,
  createWebHistory,
  createWebHashHistory,
  createMemoryHistory,
  RouteRecordRaw
} from "vue-router";

import B from '../pages/route/b.vue';
import { getCurrentInstance } from '@vue/runtime-core';
// 使用插件
const appContent = getCurrentInstance();
console.log("appContent:",getCurrentInstance());

// 路由的几种模式
//vue2 mode history vue3 createWebHistory
//vue2 mode  hash  vue3  createWebHashHistory
//vue2 mode abstact vue3  createMemoryHistory


//路由数组的类型 RouteRecordRaw
// 定义一些路由
// 每个路由都需要映射到一个组件。
const routes: Array<RouteRecordRaw> = [{
  path: '/',
  component: () => import('../pages/route/a.vue'),
  // 重定向
  // redirect: '/h',
  // redirect: {path: '/h'},
  redirect: (from) => {
    console.log('redirect=>from:', from);
    return {
      path: '/h',
      query: from.query
    }
  },
  // 别名
  alias: ['/root'],
  children: [{
    path: '/h',
    components: {
      default: () => import('../pages/route/home.vue')
    }
  }]
},
// 动态路由传参数 id和params名称必须一样
{
  path: '/home/:id',
  name: 'Home',
  component: () => import('../pages/route/a.vue')
},
{
  path: '/b',
  name: 'Reg',
  component: B
  },
  // 嵌套路由
  {
    path: '/user',
    name: 'User',
    component: () => import('../pages/route/user.vue'),
    children: [{
      path: 'c',
      name: 'C',
      component: () => import('../pages/route/c.vue')
    },
    {
      path: 'd',
      name: "D",
      component: ()=> import('../pages/route/d.vue')
    }
    ]
  },
  // 命名视图
  {
    path: '/name',
    components: {
      default: () => import('../pages/route/a.vue'),
      header: () => import('../pages/route/b.vue'),
      footer: () => import('../pages/route/c.vue'),
    }
  },
  // 路由守卫
  {
    path: '/bf',
    components: {
      default: () => import('../pages/route/bf.vue')
    }
  },
  {
    path: '/disable',
    components: {
      default: () => import('../pages/route/disable.vue')
    }
  },
  // 路由元信息meta
  {
    path: '/meteRoute',
    components: {
      default: () => import('../pages/route/mateA.vue')
    },
    meta: {
      title: '元信息页面1',
      transition: 'animate__backInLeft'
    }
  },
  {
    path: '/meteRoutetwo',
    components: {
      default: () => import('../pages/route/mateB.vue')
    },
    meta: {
      title: '元信息页面2',
      transition: 'animate__bounceIn'
    }
  },
  // 根据接口动态增加和删除路由
  {
    path: '/demoEnter',
    component: () => import('../pages/route/demoEnter.vue')
  }
];

const router = createRouter({
  history: createWebHistory(),
  // 路由页面的滚动行为
  scrollBehavior: function (to, from, savePosition) {
    console.log('savePosition:', savePosition);
    if (savePosition) {
      return savePosition;
    } else {
      return {
        top: 0
      };
    }
  },
  routes
});

// to: Route， 即将要进入的目标 路由对象；
// from: Route，当前导航正要离开的路由；
// next(): 进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed (确认的)。
// next(false): 中断当前的导航。如果浏览器的 URL 改变了 (可能是用户手动或者浏览器后退按钮)，那么 URL 地址会重置到 from 路由对应的地址。
// next('/') 或者 next({ path: '/' }): 跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。
 
// 全局路由前置守卫
// 白名单
let pathList = ['/user', '/bf', '/', '/meteRoute', '/meteRoutetwo', '/demoEnter', '/demo1', '/demo2'];
router.beforeEach((to, from, next) => {
  // 通过元信息设置title
  to.meta.title && (document.title = (to.meta.title) as string);
  // 使用loadingbar插件
  window.loadingBar.startLoadingBar();
  console.log('全局路由前置守卫:', to, from);
  if (to.path === '/disable') next();
  if (!pathList.includes(to.path)) {
    console.log('不在白名单内');
    next({
      path: '/disable'
    });
  } else {
    console.log('白名单内');
    // next(false);
    // next('/user');
    next();
  };
  // next()
});

// 全局路由后置守卫
router.afterEach((to, from) => {
  console.log('全局路由hou置守卫:', to, from);
  // 使用loadingbar插件
  window.loadingBar.endLoadingBar();
})

export default router;